<script setup lang="ts">
import CdlTable from "@/components/table";
import CdlSearch from "@/components/search";
import CdlForm from "@/components/form"
import {Mode, Query, State, FormData} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive, h} from "vue";
import {useTableTemplate} from "@/hooks/TableHooks";
import {InspectItem} from "@/interfaces/views/vehicle/inspect";
import {TableTree} from "@/interfaces/components/Table";
import {FormTree} from "@/interfaces/components/Form";
import {createPopup} from "@/utils/createPopup";
import {appStore} from "@/store/modules/app";
import {useFormTemplate} from "@/hooks/formHooks";

const router = useRouter()
const store = appStore()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/inspect-dict",
}
const state = reactive<State<Query<InspectItem>, InspectItem>>({
  queryForm: {},
  dataList: []
})
const {query, added, update, del} = useTableTemplate(request, state)

const searTree: FormTree<InspectItem> = [
    [
      {label: "检查项名字", component: "input"}
    ]
]
const tree: TableTree<InspectItem> = {
  colRule: [
    {ti: "检查项", prop: "name"},
    {ti: "检查类型", prop: "type", dict: "inspect_Item_type"},
    {ti: "是否必填", prop: "required", dict: "overall_yes_or_no"},
    {ti: "检查字段类型", prop: "inputType", dict: "inspect_item_inputType"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "修改", type: "success", method: openInspectionItemUpdate},
    {name: "删除", type: "danger", prop: "id", method: del},
  ]
}
const popupFormTree: FormTree<InspectItem> = [
    [
      {label: "检查项名字", component: "input", prop: "name", rule: [
          {required: true, message: "必须填写检查项名字", trigger: "blur"}
        ]},
      {label: "检查类型", component: "radio", prop: "type", options: store.getFormatDict("inspect_Item_type"),
        optionProps: {label: "dictLabel", value: "dictValue"}, rule: [
          {required: true, message: "必须选择检查类型", trigger: "change"}
        ]},
    ],
    [
      {label: "输入类型", component: "select", prop: "inputType", options: store.getFormatDict("inspect_item_inputType"),
        optionProps: {label: "dictLabel", value: "dictValue"}, rule: [
          {required: true, message: "必须选择输入类型", trigger: "change"}
        ], placeholder: "请选择一个输入类型"},
      {label: "是否必填", component: "radio", prop: "required", options: [
          {label: "否", value: 0},
          {label: "是", value: 1}
        ], rule: [
          {required: true, message: "必须填写是否必填", trigger: "blur"}
        ]}
    ],
    [
      {label: "备注", component: "input", type: "textarea", prop: "remark", max: 200, rows: 4, style: "flex: 1"},
    ]
]
const popupForm: FormData<InspectItem> = {
  id: undefined,
  name: "",
  type: 1,
  inputType: undefined,
  required: 1,
  remark: ""
}
const {createPopupDataTemplate} = useFormTemplate(popupForm)
/**
 * 新增检查项
 */
function openInspectionItemInsert(){
  createPopup("新增检查项", h(CdlForm, {
    templateTree: popupFormTree,
    model: popupForm
  }), "add", popupCallBack)
}

/**
 * 修改检查项
 * @param data
 */
function openInspectionItemUpdate(data: InspectItem){
  createPopup("修改检查项", h(CdlForm, {
    templateTree: popupFormTree,
    model: createPopupDataTemplate(data)
  }), "update", popupCallBack)
}

/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){
  switch (mode){
    case "add":
      added(data)
      break
    case "update":
      update(data)
  }
}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="primary" @click="openInspectionItemInsert">新增</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList"></CdlTable>
  </el-card>
</template>
